import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";
// TODO switch为html默认保留标签,需要特定的loader来处理
import Switch from "../src/components/switch/switch.vue";

<Meta title="数据录入/Switch 开关" component={Switch} />

# Switch 开关

开关选择器

### 引入组件

```js
import { Switch } from "graceful-ui";
```

注意: 由于`Switch`为浏览器的保留标签,因注册组件的时候需要使用别名如`GSwitch`标签来注册组件.

### 基本使用

使用`v-model`来绑定值

<Preview>
  <Story name="v-model 绑定">
    {{
      template: `
        <div>
          <GSwitch v-model="value" @on-change="change"></GSwitch>
        </div>
      `,
      components: { GSwitch: Switch },
      data() {
        return {
          value: false,
        };
      },
      methods: {
        change(val) {
          console.log(val);
        },
      },
    }}
  </Story>
</Preview>

### 不同尺寸

使用 size 来确定尺寸, 可选值为`large`, `default`, `small`, 默认为`default`

<Preview>
  <Story name="size 尺寸">
    {{
      template: `
        <div>
          <GSwitch v-model="value1" size="large"></GSwitch>
          <GSwitch v-model="value2" size="default"></GSwitch>
          <GSwitch v-model="value3" size="small"></GSwitch>
        </div>
      `,
      components: { GSwitch: Switch },
      data() {
        return {
          value1: false,
          value2: false,
          value3: false,
        };
      },
      methods: {
        change(val) {
          console.log(val);
        },
      },
    }}
  </Story>
</Preview>

## API

<Props of={Switch} />
